﻿<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://127.0.0.1:1126/api/?"></script>
    <script type="text/javascript" src="js/cluster/PruneCluster.js"></script>
    <script type="text/javascript" src="js/js/aqjc.js"></script>

    <link href="css/chushihua.css" rel="stylesheet" type="text/css" media="screen">
    <link href="css/caidan.css" rel="stylesheet" type="text/css" media="screen">
    <link rel="stylesheet" href="js/cluster/LeafletStyleSheet.css"/>
    <!-- 表格的样式，可以不用  -->
    <!-- 引用api地址  -->

</head>
<body onload="window_onload();">
<div id="layers" style="height=10px">
    <button id="btn-zoomout" onclick="zoom_in();" type="button">放大</button>
    <button id="btn-zoomin" onclick="zoom_out();" type="button">缩小</button>
    <button id="btn-ProfessionalSystem" style="cursor: pointer;" onclick=" layercontrol();" type="button">[图层管理]
    </button>
    <button id="bMeasureLine" onclick="Measure_Length()" type="button">测距</button>
    <button id="bMeasureAngle" onclick="Measure_Angle();" type="button">测方位角</button>
    <button id="bMeasureArea" onclick="Measure_Area();" type="button">测量面积</button>
    <button id="bClear" class="bClear" onclick="Clear();" type="button">清除</button>
    <button id="bRefresh" class="bRefresh" onclick="refreshMap()" type="button">刷新</button>
    <button id="bFull" class="bFull" onclick="fullView()" type="button">全图显示</button>
    <input id="Query_text" type="text" name="fname"/>
    <button id="bQuery" class="bQuery" onclick="Query();" type="button">查找</button>
</div>
<div class="caidan clearfix">
    <ul class="caidan_ul clearfix">
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
        <label class="caidan_li">
            <input type="checkbox"><span>菜单内容dddd菜单内容dddd菜</span>
        </label>
    </ul>
    <div class="caidan_dibu"><a>确定</a><a class="quxiao">取消</a></div>
</div>
<div style="height:600px; ">
    <div id="map" style="height:600px; width:75% ; float:left"></div>
    <div id="aj_data" style="height:600px; width:25% ;overflow:scroll; float:left">
        <table id="table_data" cellspacing="0" cellpadding="0" style="font-size: 12px;"></table>
    </div>
</div>

<script>
    //实例化地图
    var is_layer_control = true;
    map = new LMap('map', {
        zoom: 0,
        boxzoom: true,
        drawControlTooltips: true,
        zoomControl: true, //默认显示控制器按钮
        dsname: "psi.lfmx",  //地图名称
        mapname: "sdpsi",    //地图集名称
    });
    var map_type = "巷"
    var layers_all, layers_show = "", layers_hide = "";
    //获取所有图层数据
    $.ajax({
        type: "get",
        dataType: "json",
        async: false,
        url: url + 'lrmapsvr/rest/',
        data: {
            oper: 'getlayers',
            uid: uid,
            dsid: dsid,
            mapid: mapid
        },
        success: function (data) {
            layers_all = data.layers;
            //console.info(layers);
        }
    })
    /*var get_data = {oper : 'getlayers',
     uid : uid,
     dsid : 1,
     mapid : 0};
     layers_all = get(url+'lrmapsvr/rest/',get_data);*/
    for (var i = 0; i < layers_all.length; i++) {
        if (layers_all[i].name.indexOf(map_type) > 0) {
            layers_show += layers_all[i].name + ',';
        } else {
            layers_hide += layers_all[i].name + ',';
        }
    }
    //打开特定图层数据
    $.ajax({
        type: "get",
        dataType: "json",
        async: false,
        url: url + 'lrmapsvr/rest/',
        data: {
            oper: 'showlayers',
            uid: uid,
            dsid: dsid,
            mapid: mapid,
            layers: layers_show
        },
        success: function (data) {
            //var layers_all = data;
            //console.info(layers);
        }
    })
    //关闭特定图层数据
    $.ajax({
        type: "get",
        dataType: "json",
        async: false,
        url: url + 'lrmapsvr/rest/',
        data: {
            oper: 'hidelayers',
            uid: uid,
            dsid: dsid,
            mapid: mapid,
            layers: layers_hide
        },
        success: function (data) {
            //var layers_all = data;
            //console.info(layers);
        }
    })
    //添加动态请求图层
    tileLayer = L.tileLayer.wms('http://127.0.0.1:1126/lrmapsvr/wms/', {
        uid: uid,
        trans: '0',
        dsid: dsid,   //固定写法，地图源id
        mapid: mapid,   //固定写法，地图id
        request: 'getmap',
        format: 'image/png',
        continuousWorld: true,
        attribution: '&copy; <a href="http://www.longruan.com">Longruan</a>'
    });
    tileLayer.addTo(map);

    //添加静态请求图层
    /*tileImage = new LrTileLayer('http://127.0.0.1:8082/',{
     code :'sdgis',    //用于存放切好静态图的的煤矿文件夹
     continuousWorld : true
     });
     tileImage.addTo(map);*/
    //map.removeLayer(tileImage);

    function window_onload() {
        data = [
            {
                "type": "Feature",
                "id": "11",
                "Name": "瓦fffffffffffffffffffff斯",
                "data": "21",
                "超限": " 是",
                "geometry": {"type": "Point", "coordinates": [110.2542, 39.24867]}
            },
            {
                "type": "Feature",
                "id": "12",
                "Name": "瓦斯",
                "data": "21",
                "超限": "否",
                "geometry": {"type": "Point", "coordinates": [null, null]}
            },
            {
                "type": "Feature",
                "id": "13",
                "Name": "瓦斯",
                "data": "21",
                "超限": "否",
                "geometry": {"type": "Point", "coordinates": [110, 39.24867]}
            },
            {
                "type": "Feature",
                "id": "14",
                "Name": "瓦斯",
                "data": "21",
                "超限": "否",
                "geometry": {"type": "Point", "coordinates": [110.2542, 39.24867]}
            },
            {
                "type": "Feature",
                "id": "15",
                "Name": "瓦斯",
                "data": "21",
                "超限": "否",
                "geometry": {"type": "Point", "coordinates": [110.2542, 39.24867]}
            },
            {
                "type": "Feature",
                "id": "16",
                "Name": "瓦斯",
                "data": "21",
                "超限": "是",
                "geometry": {"type": "Point", "coordinates": [110.2442, 39.24867]}
            },
            {
                "type": "Feature",
                "id": "17",
                "Name": "瓦斯",
                "data": "21",
                "超限": "否",
                "geometry": {"type": "Point", "coordinates": [110.2342, 39.24867]}
            },
            {
                "type": "Feature",
                "id": "18",
                "Name": "瓦斯",
                "data": "21",
                "超限": "否",
                "geometry": {"type": "Point", "coordinates": [110.2542, 39.26867]}
            }
        ];   //获取数据，json存储
        add_data();
        marker_add();
    }


    //初始化添加模块——重要，必须添加，添加marker需要使用
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    map.on('draw:created', function (e) {
        var type = e.layerType,
                layer = e.layer;
        drawnItems.addLayer(layer);
        //将数据保存，供查询使用
        if (type == 'marker') {
            var point_position = e.layer.getLatLng();
            //if(!save_data(point_position)){
            save_data(point_position)
            drawnItems.removeLayer(layer);
            //};
        }
    });

    //---------------------------------将数据显示到表格中，主要是对表格的操作处理-----对应修改放到easyui中去---------------------------------//
    function add_data() {

        var data_length = data.length;
        var tableStr = "<thead><tr><th>ID</th><th>传感器类型</th><th>lng</th><th>lat</th><th>值</th><th>超限</th><th>添加点</th></tr></thead>"
        for (i = 0; i < data_length; i++) {
            var r = /^[0-9]+.?[0-9]*$/;
            if (r.test(data[i].geometry.coordinates[0]) && r.test(data[i].geometry.coordinates[1]) && data[i].geometry.coordinates[0] != 0 && data[i].geometry.coordinates[1] != 0) {
                tableStr = tableStr + "<tr><td>" + data[i].id + "</td> <td>" + data[i].Name + "</td> <td>" + data[i].geometry.coordinates[0].toFixed(4) + "</td> <td>" + data[i].geometry.coordinates[1].toFixed(4) + "</td> <td>" + data[i].data + "</td>" + "<td>" + data[i].超限 + "</td><td><a  HREF=javascript:void(0) onclick=selcet_pos(this,this.parentNode.parentNode.rowIndex,this.innerHTML); >移除</a></td></tr>";
            } else {
                tableStr = tableStr + "<tr><td>" + data[i].id + "</td> <td>" + data[i].Name + "</td> <td>" + data[i].geometry.coordinates[0] + "</td> <td>" + data[i].geometry.coordinates[1] + "</td> <td>" + data[i].data + "</td>" + "<td>" + data[i].超限 + "</td><td><a HREF= javascript:void(0) onclick=selcet_pos(this,this.parentNode.parentNode.rowIndex,this.innerHTML); >添加</a></td></tr>";
            }

        }

        document.getElementById("table_data").innerHTML = tableStr;
        //点击事件
        var tab = document.getElementById('table_data');
        var trs = tab.getElementsByTagName('tr');
        for (var i = 0; i < trs.length; i++) {
            var tr = trs[i];
            tr.onmouseover = function () {
                this.style.background = "#BCD2EE";
            }
            tr.onmouseout = function () {
                this.style.background = "#FFFFFF";
            }
            tr.onclick = function () {
                //alert("点击了第"+rowNum+"行");
                var lng = this.cells[2].innerHTML;
                var lat = this.cells[3].innerHTML;
                var r = /^[0-9]+.?[0-9]*$/;
                if (r.test(lat) && r.test(lng)) {
                    map.panTo([lat, lng]);
                }
            }

        }
    }


    //添加函数
    var a_obj = {};
    function selcet_pos(obj, rows, name) {
        a_obj = obj;
        if (name == "添加") {
            addmarker = new L.Draw.Marker(map, {icon: myIcon2});
            addmarker._enabled = true;
            addmarker.addHooks();
        } else if (name = "移除") {
            delet_data();
        }
    }
    function save_data(data_a) {
        var id = a_obj.parentNode.parentNode.firstChild.innerHTML;
        if (window.confirm('你确定添加数据吗？')) {
            a_obj.parentNode.parentNode.cells[3].innerHTML = data_a.lat.toFixed(4);
            a_obj.parentNode.parentNode.cells[2].innerHTML = data_a.lng.toFixed(4);
            a_obj.innerHTML = "移除";
            //将数据保存
            var id = a_obj.parentNode.parentNode.cells[0].innerHTML
            for (var i = 0; i < data.length; i++) {
                if (data[i].id == id) {
                    data[i].geometry.coordinates[0] = data_a.lng;
                    data[i].geometry.coordinates[1] = data_a.lat;
                }
            }
            //移除标记，重新加载
            //geojson.clearLayers();
            //map.removeLayer(leafletView);
            leafletView.RemoveMarkers();
            marker_add();
            return true;
        } else {
            return false;
        }
    }
    function delet_data() {
        var id = a_obj.parentNode.parentNode.firstChild.innerHTML;
        if (window.confirm('你确定删除数据吗？')) {
            a_obj.parentNode.parentNode.cells[2].innerHTML = "";
            a_obj.parentNode.parentNode.cells[3].innerHTML = "";
            a_obj.innerHTML = "添加";
            //将数据保存,通过后台保存至数据库
            for (var i = 0; i < data.length; i++) {
                if (data[i].id == id) {
                    data[i].geometry.coordinates[0] = "";
                    data[i].geometry.coordinates[1] = "";
                }
            }
            //移除标记，重新加载
            //geojson.clearLayers();
            //map.removeLayer(leafletView);
            leafletView.RemoveMarkers();
            marker_add();
            return true;
        }
    }

</script>
</body>
</html>